<template>
	<view class="task-container">
		<view class="search-wrap">
			<view class="store-search">
          <!-- @input="change" -->
				<input v-model="memName" type="text" :border="false" @input="storeListSearch" placeholder="请输入配置人姓名"/>
			</view>
		</view>
		<!-- 暂无数据 -->
		<view class="none-data" v-if="noneData==1">暂无任务，<view class="add-btn" @click="addTask()">去添加</view></view>
		<!-- 任务列表 -->
		<view class="task-list" v-if="noneData==2">
			<!--  -->
			<view class="task-item" v-for="(item, index) in brandList" :key="index">
				<view class="time-operation">
					<view class="time">{{item.time.split(' ')[0]}} 配置人：{{item.memName}}</view>
					<view class="btn-wrap"><view class="edit-btn" @click="editTask(item)">编辑</view><view class="del-btn" @click="deleteTask(item)">删除</view></view>
				</view>
				<view class="brand-item">
					<view class="title">{{item.title}}<view :class="item.open ? 'arrow-cur':'arrow'" @click="brandShowHide(index)"></view></view>
					<view class="brand-name" v-if="item.open">
						<view class="brand-name-item" v-for="(items, indexs) in item.brands" :key="indexs">{{items.brandName}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 新增任务按钮 -->
		<view class="add-task-overview"><view class="btn-sure" @click="addTask()">新增任务</view></view>
		<!-- 新增/编辑 -->
		<view class="add-task-shadow" v-if="taskEditToast"></view>
		<view class="add-task-toast" v-if="taskEditToast">
			<view class="title">{{taskTitle}}</view>
			<scroll-view class="content" scroll-y style="width: 100%;">
				<u-input v-model="editParams.title" type="textarea" class="my-form-textarea" placeholder="输入任务名称…" :border="false" :auto-height="true" maxlength="200" />
				<view class="manage-brand">
					<view class="subtitle">任务关联品牌</view>
					<u-checkbox-group v-model="editParams.brandIds" class="popup-checkbox-group" ref="channelSelector" shape="circle" icon-size="26" active-color="rgb(52,127,203)" @change="checkboxGroupChange">
						<u-checkbox @change="checkChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :label="item.brandCode" :name="item.brandCode">{{item.brand}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</scroll-view>
			<view class="operation-buttons">
				<view class="cancel-btn" @click="cloneTask()">取消</view>
				<view class="confirm-btn" @click="editTaskSubmit()">确认</view>
			</view>
		</view>
		<!-- 删除任务 -->
		<view class="add-task-shadow" v-if="taskDelToast"></view>
		<view class="delete-task-toast" v-if="taskDelToast">
			<view class="content">
				<view class="title">删除此任务？</view>
				<view class="confirm-btn" @click="deleteTaskSubmit()">删除</view>
			</view>
			<view class="cancel-btn" @click="taskDelToast = false">取消</view>
			
		</view>
	</view>
</template>

<script>
	import {
		getTaskBrand,
		getTaskConfigBrand,
		getTaskConfigList,
		editTaskConfig,
		deleteTaskConfig
	} from '../../common/service.js'
	import utils from '../../common/utils.js'
	export default {
		data() {
			return {
				taskTitle: '新增任务',
				taskType: 0,
				taskEditToast: false,
				editParams:{
					title:'',
					brandIds:[]
				},
				taskDelToast: false,
				editID:0,
				dleteID: 0,
				brandList:[],
				list: [],
				noneData: 0,
				memName: '',
			};
		},
		onLoad: function() {
			const that = this
			
			//this.stop()
			// 登录
			this.LOGINACTION();
			// 获取品牌列表
			this.queryGetTaskBrand()
			// 获取助店任务配置列表
			this.getQueryTaskConfigList()
			
			// console.log('App Launch');
			// document.body.addEventListener(
			//   'touchmove',
			//   function (e) {
			// 	e.preventDefault();
			//   },
			//   { passive: false }
			// );
		},
		onShow: function() {
			const that = this;
		},
		methods: {
			change: function(name) {
				console.log(name.detail?name.detail.value:name);
				this.getQueryTaskConfigList()
			},
			// 阻止页面滚动
			stop(){
				var box=function(e){passive: false ;};
				document.body.style.overflow='hidden';
				document.addEventListener("touchmove",box,false);
			},
			// 允许页面滚动
			move(){
				var box=function(e){passive: false };
				document.body.style.overflow=''; // 出现滚动条
				document.removeEventListener("touchmove",box,false);
			},
			
			// 选中某个复选框时，由checkbox时触发
			checkboxGroupChange(e){
				console.log('checkboxGroupChange',e);
				// e && e.map((s) => {
				// 	this.list.map((m,index) => {
				// 		if(s == m.brandCode){
				// 			this.list[index].checked = true
				// 		}
				// 	});
				// });
			},
			
			// 选中某个复选框时，由checkbox时触发
			checkChange(e){
				console.log('checkChange',e)
				this.list.map((m,index) => {
					if(e.name == m.brandCode){
						e.value ? this.list[index].checked = true : this.list[index].checked = false
					}
				});
			},
			
			// 品牌展示/隐藏
			brandShowHide(index){
				console.log(index)
				this.editID = this.brandList[index].id
				this.brandList[index].open = !this.brandList[index].open
			},
			
			// 品牌
			queryGetTaskBrand(){
				const that = this
				getTaskBrand({}, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.code == 200) {
							const newList = []
							const list = rs.data || [];
							list.map((item,index) => {
								newList.push({
									brand: item.brand,
									brandCode: item.brandCode,
									checked: false
								})
							});
							that.list = newList
							console.log('qq',newList,that.list)
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取品牌列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取品牌列表失败:',e);
				});
			},
			
			// 助店任务配置列表
			getQueryTaskConfigList(){
				const that = this
				const newList = []
				getTaskConfigList({'memName': that.memName}, function(res) {
					console.log(res);
					if (res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							rs.data.map((item,index) => {
								newList.push({
									brands: item.brands,
									configId: item.configId,
									title: item.title,
									time: item.createTime,
									open: false,
									memName: item.memName,
								})
							});
							that.brandList = newList
							if (newList.length == 0) {
								that.stop()
								that.noneData = 1
							} else {
							    that.move()
								that.noneData = 2
							}
						} else {
							that.$refs.uToast.show({
								title: rs.msg || '',
								type: 'error',
								duration: 3000,
								callback: function() {
									return;
								}
							});
						}
					} else {
						console.log('模拟数据')
					}
				}, function(e) {
				})
			},
			
			// 新增
			addTask(){
				// 阻止页面滑动
				this.stop()
				this.queryGetTaskBrand()
				this.taskEditToast = true
				this.taskTitle = '新增任务'
				this.taskType = 0
				this.editParams.title = ''
				this.editParams.brandIds = []
			},
			
			// 修改
			editTask(item){
				const that = this
				console.log(item)
				// 阻止页面滑动
				this.stop()
				this.taskTitle = '修改任务'
				this.taskType = 1
				this.taskEditToast = true
				this.editID = item.configId
				this.editParams.title = item.title
				const brandIds = item.brands
				// 请求助店任务品牌列表
				brandIds && brandIds.map((s) => {
					this.list.map((m,index) => {
						if(s.brandCode == m.brandCode){
							this.list[index].checked = true
						}
					});
				});
			},
			
			// 修改/新增 取消
			cloneTask(){
				const newList = []
				const that = this
				this.taskEditToast = false
				// 品牌选中态清空
				that.list.map((item,index) => {
					newList.push({
						brand: item.brand,
						brandCode: item.brandCode,
						checked: false
					})
				});
				that.list = newList
				// 还原页面可以滚动
				this.move()
			},
			
			// 修改/新增 确定
			editTaskSubmit(){
				const that = this
				const values = []
				const newList = []
				that.list.map((s) => {
					s.checked && values.push(s.brandCode);
				});
				const params = {
					title: that.editParams.title,
					brandCodes: values
				}
				
				if(that.taskType == 1){
					params.configId = that.editID
				}
				
				console.log(params)
				// return
				editTaskConfig(params, function(res) {
					console.log(res);
					if (res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							that.getQueryTaskConfigList()
							that.list.map((item,index) => {
								newList.push({
									brand: item.brand,
									brandCode: item.brandCode,
									checked: false
								})
							});
							that.list = newList
						} else {
							that.$refs.uToast.show({
								title: rs.msg || '',
								type: 'error',
								duration: 3000,
								callback: function() {
									return;
								}
							});
						}
					} else {
						console.log('模拟数据')
					}
				}, function(e) {
				})
				
				this.taskEditToast = false
				// 还原页面可以滚动
				this.move()
			},
			
			// 助店任务品牌
			queryGetTaskConfigBrand(){
				const that = this
				const params = {
					configId: this.editID
				}
				getTaskConfigBrand(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.code == 200) {
							const newList = []
							const list = rs.data || [];
							// 品牌选中态清空
							list.map((item,index) => {
								newList.push({
									brand: item.brand,
									brandCode: item.brandCode,
									checked: false
								})
							});
							that.list = newList
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取品牌列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取品牌列表失败:');
					console.log(e);
				});
			},
			
			// 删除
			deleteTask(item){
				console.log('item',item)
				this.dleteID = item.configId
				this.taskDelToast = true
			},
			
			// 删除 确定
			deleteTaskSubmit(){
				console.log(this.dleteID)
				const that = this
				const values = []
				that.list.map((s) => {
					s.checked && values.push(s.brandCode);
				});
				const params = {
					brandCodes:values,
					configId: that.dleteID,
					title: that.editParams.title
				}
				deleteTaskConfig(params, function(res) {
					console.log(res);
					if (res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							that.getQueryTaskConfigList()
						} else {
							that.$refs.uToast.show({
								title: rs.msg || '',
								type: 'error',
								duration: 3000,
								callback: function() {
									return;
								}
							});
						}
					} else {
						console.log('模拟数据')
					}
				}, function(e) {
				})
				this.taskDelToast = false
			},
		}
	};
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}
	.task-container {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		position: relative;
		background: #FFFFFF;
	}
	.none-data{
		display: flex;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
		padding-top: 680rpx;
		background: url('../../static/toStore/none-date.png') no-repeat center 390rpx;
		background-size: 437rpx 227rpx;
		justify-content: center;
		.add-btn{
			font-size: 32rpx;
			color: #307DCD;
		}
	}
	.store-search{
		display: flex;
		width: 100%;
		height: 90rpx;
		padding-left: 72rpx;
		background: url('../../static/toStore/search.png') no-repeat 30rpx 33rpx #FFFFFF;
		background-size: 28rpx;
		border-radius: 48rpx;
		margin: 0 auto;
		margin-top:0;
		margin-bottom:0;
		align-items: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		input{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.search-wrap {
		width: 100%;
		position: relative;
		padding: 30rpx;
		background-color: #F7F7F7;
	}	
	.my-input-memName {
		width: 540rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
	}
	.add-task-shadow{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 88;
		background: rgba(0,0,0,0.3);
	}
	.add-task-toast{
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 99;
		width: 690rpx;
		height: 1130rpx;
		overflow-y: auto;;
		margin-top: -565rpx;
		margin-left: -345rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.title{
			height: 105rpx;
			line-height: 105rpx;
			border-bottom: 1px solid #F7F7F7;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}
		.manage-brand{
			padding-top: 30rpx;
			.subtitle{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				text-align: center;
			}
		}
	}
	.my-form-textarea{
		width: 630rpx;
		height: 180rpx;
		padding: 20rpx !important;
		margin: 30rpx;
		font-size: 28rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		overflow-y: auto;
	}
	.popup-checkbox-group{
		padding: 10rpx 20rpx;
		/deep/ .u-checkbox{
			// width: 33% !important;
			margin-bottom: 8rpx !important;
		}
	}
	.operation-buttons{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		display: flex;
		height: 100rpx;
		background: #fff;
		border-top: 1px solid #F7F7F7;
		.cancel-btn{
			display: flex;
			justify-content: center;
			width: 50%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #666666;
			border-right: 1px solid #F7F7F7;
			align-items: center;
		}
		.confirm-btn{
			display: flex;
			justify-content: center;
			width: 50%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #307DCD;
			align-items: center;
		}
	}
	.task-list{
		padding: 20rpx 25rpx 130rpx;
		.task-item{
			width: 697rpx;
			margin-bottom: 20rpx;
			padding: 0 28rpx 20rpx;
			background: #F7F7F7;
			border-radius: 8rpx;
			.time{
				font-size: 30rpx;
				color: #333333;
			}
			.time-operation{
				display: flex;
				height: 85rpx;
				line-height: 85rpx;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #D8D8D8;
				.btn-wrap{
					display: flex;
				}
				.edit-btn{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #307DCD;
				}
				.del-btn{
					margin-left: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #FF4040;
				}
			}
		}
	}
	.brand-item{
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			// height: 80rpx;
			padding-top: 20rpx;
			.arrow::before{
				display: inline-block;
				content: '品牌';
				width: 82rpx;
				height: 33rpx;
				background: url('') no-repeat right 16rpx;
				background-size: 21rpx 12rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}
			.arrow-cur::before{
				display: inline-block;
				content: '收起';
				width: 82rpx;
				height: 33rpx;
				background: url('') no-repeat right 14rpx;
				background-size: 21rpx 12rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
	.brand-name{
		display: flex;
		width: 639rpx;
		background: #FFFFFF;
		padding: 20rpx 0 0 30rpx;
		border-radius: 8rpx;
		flex-wrap: wrap;
		margin-top: 20rpx;
		&-item{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			margin: 0 70rpx 20rpx 0;
		}
	}
	.add-task-overview{
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		width: 750rpx;
		height: 120rpx;
		padding: 15rpx 20rpx;
		background: #FFFFFF;
		.btn-sure{
			width: 690rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background: #307DCD;
			border-radius: 54rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.delete-task-toast{
		position: fixed;
		width: 690rpx;
		left: 30rpx;
		right: 0;
		bottom: 50rpx;
		z-index: 99;
		.content{
			width: 690rpx;
			height: 177rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
		.title{
			height: 80rpx;
			line-height: 80rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
			border-bottom: 1px solid #F7F7F7;
		}
		.confirm-btn{
			height: 95rpx;
			line-height: 95rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FF4040;
			text-align: center;
		}
		.cancel-btn{
			width: 690rpx;
			height: 90rpx;
			margin-top: 15rpx;
			line-height: 90rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #307DCD;
			text-align: center;
		}
	}
	.content{
		height: calc(100% - 105px);
	}
</style>
